<template>
	<view class="tantan-slide">
		<view class="tantan-slide-footer">
			<view class="tantan-slide-footer-btn" @click="footerBtnClick('dislike')">
				<view class="tantan-slide-footer-icon">
					<image style="width: 40rpx;" mode="widthFix" :src="getImageUrl('find_unlove.png')"></image>
				</view>
			</view>
			<view class="tantan-slide-footer-btn" @click="footerBtnClick('love')">
				<view class="tantan-slide-footer-icon">
					<image style="width: 50rpx;" mode="widthFix" :src="getImageUrl('find_love.png')"></image>
				</view>
			</view>
		</view>
		<view @touchstart.capture="touchStart($event,currentIndex)"
			@touchmove.stop.capture="touchMove($event,currentIndex)"
			@touchend.capture="touchEnd(currentIndex)" class="tantan-slide-box">
			<!-- <template v-for="(item, index) in list" > -->
				<view class="tantan-slide-box-item" v-for="(item, index) in list" :key="index"
					v-if="currentIndex + visible >= index"
					:style="[cardTransform(item, index)]">
					 <!-- 加载图片会闪屏 双if避免 -->
					<template v-if="currentIndex + visible >= index && currentIndex <= index">
						<view class="tantan-slide-direction" :animation="currentIndex === index ? animationData : ''">
							<image class="tantan-slide-img" mode="aspectFill" :src="item.headPicUrl" ></image>
							<view class="tantan-slide-box-item-bg zy-column-end love-card zy-p">
								<view class="zy-row-between">
									<view class="zy-column-center">
										<view class="zy-text-white-lg-bold">{{item.nick}}</view>
										<view class="zy-text-white">{{getInfo(item)}}</view>
									</view>
									<view class="zy-row">
										<image class="zy-img zy-ml-sm" mode="aspectFill" v-for="(item,index) in item.introPicIdUrl" :src="item"></image>
									</view>
								</view>
								<view class="zy-text-white-lg-bold zy-mt-lg">身份信息</view>
								<view class="zy-row-between zy-mv">
									<view class="zy-text-whitegrey" v-if="item.educStr">学历：{{item.educStr}}</view>
									<view class="zy-text-whitegrey"  v-if="item.heightStr">身高：{{item.heightStr}}</view>
									<view class="zy-text-whitegrey"  v-if="item.careerStr">职务：{{item.careerStr}}</view>
								</view>
							</view>
						</view>
					</template>
				</view>
			<!-- </template> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "tantan",
		props: {
			list: {
				type: Array,
				default: () => []
			},
			visible: {
				type: Number,
				default: 3
			}
		},
		data() {
			return {
				winWidth: 0,
				winHeigh: 0,
				/*记录x y轴*/
				x: {
					start: 0,
					move: 0,
					end: 0
				},
				y: {
					start: 0,
					move: 0,
					end: 0
				},
				/*下标*/
				currentIndex: 0,
				/*滑动*/
				swipering: false,
				/*滑动中*/
				slideing: false,
				love: 0,
				dislike: 0,
				direction: '',
				animationData: {}
			}
		},
		mounted() {
			const res = uni.getSystemInfoSync()
			this.winWidth = res.windowWidth
			this.winHeigh = res.windowHeight
		},
		methods: {
			cardTransform(item, index) {
				let css = {
					'zIndex': this.list.length - index,
					'opacity': this.currentIndex + this.visible - 1 >= index && this.currentIndex <= index ? 1 : 0,
					'transform': 'rotate(' + ((item.x || 0) / 30 ) +  'deg) translate3d(' + (item.x || 0) + 'px,' + (item.y || 0) + 'px, '+  (this.currentIndex - index) * 50  +'px)'
				};
				 // css.transform += this.currentIndex && this.currentIndex === index ? `rotate(0,${this.direction === 'left' ? '-10':'10'}deg)` : ''
				if (index === this.currentIndex) {
					if (this.slideing) {
						css["transitionDuration"] = `${!this.swipering ? 1000 : 0}ms`;
					} else {
						css["transitionDuration"] = `${!this.swipering ? 300 : 0}ms`;
					}
				}
				return css
			},
			touchStart(e, index) {
				if (this.slideing || this.list.length == this.currentIndex) {
					return
				};
				if (typeof this.list[index].x === 'undefined' && typeof this.list[index].y === 'undefined') {
					this.$set(this.list[index], 'y', 0)
					this.$set(this.list[index], 'x', 0)
				}
				this.swipering = true;
				this.x.start = Number.parseInt(e.touches[0].pageX);
				this.y.start = Number.parseInt(e.touches[0].pageY);
			},
			touchMove(e, index) {
				if (this.slideing || this.list.length == this.currentIndex) {
					return
				}
				this.x.move = Number.parseInt(e.touches[0].pageX);
				this.y.move = Number.parseInt(e.touches[0].pageY);
				
				this.list[index].x = this.x.move - this.x.start
				this.list[index].y = this.y.move - this.y.start
				if (Number.parseInt(this.list[index].x) > 0) {
					this.love = Number.parseInt(this.list[index].x) / (100 * 2)
				} else {
					this.dislike = Math.abs(Number.parseInt(this.list[index].x) / (100 * 2))
				}
			},
			touchEnd(index) {
				if (this.slideing || this.list.length == this.currentIndex) {
					return;
				}
				this.swipering = false;
				if (
					this.list[index].x > 0 &&
					this.list[index].x > this.winWidth / 2 - this.winWidth / 5
				) {
					this.touchEndNext(index);
				} else if (
					this.list[index].x < 0 &&
					this.list[index].x < -this.winWidth / 2 + this.winWidth / 5
				) {
					this.touchEndNext(index);
				} else {
					this.list[index].x = 0;
					this.list[index].y = 0;
					this.slideing = false;
					this.love = 0;
					this.dislike = 0;
				}
			},
			touchEndNext(index) {
				this.slideing = true;
				this.list[index].x = this.list[index].x * 5;
				this.list[index].y = this.list[index].y * 5;
				this.touchEndDone()
			},
			touchEndDone() {
				return new Promise((resolve) => {
					setTimeout(() => {
						this.slideing = false
						this.$emit('onChange', {
							currentIndex: this.currentIndex,
							currentItem: this.list[this.currentIndex],
							type: this.love !== 0 ? 'love' : 'dislike'
						})
						this.currentIndex++
						this.x.move = 0
						this.y.move = 0
						this.slideing = false
						this.btnClickType = false
						this.love = 0
						this.dislike = 0
						resolve()
					}, 350);
				})
			},
			footerBtnClick(type) {
				if('love'==type){
					this.$emit('love', this.list[this.currentIndex])
					return
				}
				
				if (this.btnClickType) {
					return
				}
				if (this.list.length == this.currentIndex) {
					this.$emit('onChange', {
						currentIndex: this.currentIndex,
						currentItem: null,
						type: this.love !== 0 ? 'love' : 'dislike'
					})
					return;
				}
				this.btnClickType = true
				let w = 0
				if (type === 'love') {
					w = this.winWidth * 1.5
					this.love = 1
				} else if (type === 'dislike') {
					w = -this.winWidth * 1.5
					this.dislike = 1
				}
				this.$set(this.list[this.currentIndex], 'x', w)
				this.touchEndDone()
			},
			clickImage(e) {
				this.direction = this.winWidth / 2 > e.detail.x ? 'left' : 'right';
		        /*#ifdef APP-PLUS || H5*/

				let animation = uni.createAnimation({
					duration: 200,
					timingFunction: 'ease',
				})
				
				this.animation = animation
				
				this.animation.rotateY(this.direction === 'left' ? -10 : 10).step().rotateY(this.direction === 'left' ? 5 : -5).step()
				this.animationData = animation.export()
				
				setTimeout(function() {
				  this.animation.rotateY(0).step()
				  this.animationData = animation.export()
				}.bind(this), 300)
		        /*#endif*/
				this.$emit('onClickImage', {
					type: 'click',
					currentIndex: this.currentIndex,
					currentItem: this.list[this.currentIndex],
				})
			},
			getInfo(item){
				let info = item.age + "岁";
				if (item.areaStr) {
					info += " " + item.areaStr;
				}
				if (item.constellation) {
					info += " " + item.constellation;
				}
				return info;
			}
		}
	};
</script>
<style>
	.tantan-slide {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
	
	.tantan-slide-footer {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 5%;
		margin: auto;
		z-index: 9999;
		padding: 30rpx 0;
		display: flex;
		justify-content: center;
	}
	
	.tantan-slide-footer-btn {
		height: 90rpx;
		width: 180rpx;
		margin: 0 16rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-content: center;
		position: relative;
		transition: 100ms;
	}
	
	.tantan-slide-footer-btn:active {
		transform: scale(0.9);
	}
	
	.tantan-slide-footer-icon {
		width: 100%;
		height: 100%;
		border-radius: 50rpx;
		transition: 200ms;
		background-color: rgba(158, 158, 158, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
	}

	.tantan-slide-box {
		position: relative;
		width: 95%;
		height: 90%;
		perspective: 2100rpx;
		perspective-origin: 50% -30%;
		transform-style: preserve-3d;
		margin: auto;
	}

	.tantan-slide-box-item {
		transform-style: preserve-3d;
		display: flex;
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
		position: absolute;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px) rotate(0deg);
		transition: 300ms;
		/* color: #fff; */
	}

	.tantan-slide-box-item.on {
		display: block;
	}
	
	.tantan-slide-direction{
		width: 100%;
		height: 100%;
	}
	
	.tantan-slide-img {
		position: relative;
		will-change: transform;
		width: 100%;
		height: 100%;
		border-radius: 30rpx;
	}
	
	.tantan-slide-img.on{
		transform: scale(1);
		width: 50rpx;
		height: 50rpx;
	}

	.tantan-slide-box-item-bg {
		height: 489rpx;
		background: linear-gradient(360deg, rgba(0,0,0,0.87) 0%, rgba(3,3,3,0.87) 13%, rgba(20,19,19,0) 82%, rgba(24,23,23,0) 100%);
		/* background-image: linear-gradient(to bottom, transparent, #000000 70%); */
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 1;
		border-bottom-right-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		padding-bottom: 120rpx;
	}


	.tantan-slide-box-info{
		padding: 0 32rpx;
		color: #ffffff;
	}
	.tantan-slide-box-info .title{
		font-size: 64rpx;
		line-height: 1.2;
		text-shadow: 0 0 10rpx rgb(0, 0, 0, 0.5);
	}
	.tantan-slide-box-info .desc{
		font-size: 32rpx;
		line-height: 1.2;
		margin-top: 30rpx;
		text-shadow: 0 0 10rpx rgb(0, 0, 0, 0.5);
	}
	
</style>
